<template>
    <el-row class=" min-h-screen bg-indigo-400">
        <!-- 如果在class中直接使用flex没有生效,就手动通过css样式设置弹性布局 style="display: flex;" -->
        <el-col :lg="16" style="display: flex;" class=" items-center justify-center flex-col">
            <div class=" font-bold text-5xl text-light-50 mb-4">欢迎光临</div>
            <div class=" text-gray-300 text-sm">此站点为南京网博Vue3+Vite网站后台</div>
        </el-col>
        <el-col :lg="8" style="display: flex;" class=" bg-light-50 items-center justify-center flex-col">
            <div class=" font-bold text-3xl text-gray-700">欢迎回来</div>
            <div class=" flex items-center justify-center my-4">
                <span class=" h-[1px] w-16 bg-gray-200"></span>
                <span class=" text-gray-300 mx-2">账号密码登录</span>
                <span class=" h-[1px] w-16 bg-gray-200"></span>
            </div>
            <el-form :model="form" :rules="rules" class=" w-[260px]" ref="formRef">
                <el-form-item prop="username">
                    <el-input v-model="form.username" placeholder="请输入用户名">
                        <!-- 
                            通过在template中#prefix指定图片处于前缀位置
                            通过在template中#suffix指定图片处于后缀位置
                        -->
                        <template #prefix>
                            <el-icon>
                                <User />
                            </el-icon>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input type="password" show-password v-model="form.password" placeholder="请输入密码">
                        <template #prefix>
                            <el-icon>
                                <Lock />
                            </el-icon>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" color="#626AEF" class=" w-[260px] bg-indigo-700" round @click="onSubmit">登
                        录</el-button>
                </el-form-item>
            </el-form>
        </el-col>
    </el-row>
</template>
<script setup>
import { reactive, ref } from 'vue'
// 导入指定的图标,在用到时再导入
// import { User,Lock } from '@element-plus/icons-vue'


// do not use same name with ref
const form = reactive({
    username: '',
    password: ''
})

// 表单元素校验
const rules = {
    username: [
        { required: true, message: '用户名不能为空', trigger: 'blur' },
        { min: 5, max: 10, message: '用户名长度为5-10位', trigger: 'blur' },
    ],
    password: [
        { required: true, message: '密码不能为空', trigger: 'blur' },
        { pattern: /^\w{6,12}$/, message: '密码由6-12位英文字母、数字、下划线组成', trigger: 'blur' },
    ]
}

const formRef = ref(null)

import { login } from '@/api/user'

// 实现表单提交事件的校验
const onSubmit = () => {
    formRef.value.validate(result =>{
        // console.log(result)
        if(!result){
            // console.log('表单校验不通过,请检查表单元素是否符合要求')
            // alert('表单校验不通过,请检查表单元素是否符合要求')
            return false;
        }
        // console.log('恭喜您,校验成功')
        // alert('恭喜您,校验成功')
        login(form.username,form.password)
        // 响应后的回调函数
        .then(result => {
            console.log(result);
        })
    })
}
</script>